<template>
  <div class="app-container">
    <div class="app-search">
      <el-row :gutter="24">
        <el-col :span="18">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="用户名">
              <el-input v-model="search.account" placeholder="请输入用户名">
              </el-input>
            </el-form-item>
            <el-form-item label="昵称">
              <el-input v-model="search.nickName" placeholder="请输入昵称">
              </el-input>
            </el-form-item>
            <el-form-item label="联系电话">
              <el-input v-model="search.phoneNumber" placeholder="请输入联系电话">
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="6" class="right">
          <el-button type="primary" icon="el-icon-search" size="small" @click="searchChange">搜索</el-button>
          <el-button icon="el-icon-delete" size="small" @click="reset">重置</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="app-search">
      <el-row :gutter="24" type="flex" justify="between" class="padding">
        <el-col :span="12" class="titles">
          <span class="title">账号列表</span>
        </el-col>
        <el-col :span="12" class="right">
          <el-button type="primary" @click="handleAdd" size="medium">新增账号</el-button>
        </el-col>
      </el-row>
      <el-table
        v-loading="listLoading"
        :data="list"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
        :height="value === '100%' ? 'calc(100vh - 55px - 25px - 310px)' : ''"
      >
        <el-table-column
          type="index"
          width="50">
        </el-table-column>
        <el-table-column
          prop="account"
          label="账号"
          width="180"
        />
        <el-table-column
          prop="nickName"
          label="昵称"
          width="80"
        />
        <el-table-column
          prop="phoneNumber"
          label="联系电话"
          width="180"
        />
        <el-table-column
          prop="roleName"
          label="角色"
        />
        <el-table-column label="操作" width="180">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="count > 0"
        :total="count"
        :page.sync="search.page"
        :limit.sync="search['limit']"
        @pagination="list"
      />
    </div>
    <el-dialog :title="title" :visible.sync="dialogForm" width="40%" @close="colse">
      <el-form ref="form" :model="form" size="mini" :rules="rules">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="account">
          <el-input v-model="form.account" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model="form.password"  placeholder="请输入密码" :show-password="true" oninput ="value=value.replace(/[^0-9.]/g,'')"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickName">
          <el-input v-model="form.nickName" placeholder="请输入昵称"></el-input>
        </el-form-item>
        <el-form-item label="联系电话"  :label-width="formLabelWidth" prop="phoneNumber">
          <el-input v-model="form.phoneNumber" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="角色" :label-width="formLabelWidth"  prop="roleId">
          <el-select v-model="form.roleId" placeholder="请选择角色">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.roleDescribe"
              :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAccount, saveAccount } from '@/api/admin/user'
import pagination from '@/components/Pagination/index'
import {getRoleList} from "@/api/admin/role";

export default {
  components: {
    pagination
  },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      value: '100%',
      list: null,
      listLoading: true,
      dialogForm: false,
      search: {
        account: '',
        limit: 10,
        nickName: '',
        page: 1,
        phoneNumber: ''
      },
      form: {
        account: '',
        nickName: '',
        password: '',
        phoneNumber: '',
        roleId: ''
      },
      rules: {
        account: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
        ],
        nickName: [
          { required: true, message: '请输入昵称', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' }
        ],
        roleId: [
          { required: true, message: '请选择角色', trigger: 'change' }
        ]
      },
      title: '',
      options: [],
      count: 0,
      formLabelWidth: '120px',
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      }
    }
  },
  created() {
    this.getList()
    this.getRole()
  },
  methods: {
    handleAdd() {
      this.dialogForm = true
      this.title = '新增账号'
    },
    handleEdit(index, row) {
      this.dialogForm = true
      this.form = JSON.parse(JSON.stringify(row))
      this.title = '修改账号'
    },
    searchChange() {
      this.getList()
    },
    reset() {
      this.search = {
        account: '',
        limit: 10,
        nickName: '',
        page: 1,
        phoneNumber: ''
      }
    },
    colse() {
      this.form = {
        account: '',
        nickName: '',
        password: '',
        phoneNumber: '',
        roleId: ''
      }
    },
    submit() {
      this.$refs.form.validate((vaild,done) => {
        if (vaild) {
          if (this.form.parentId) {
            this.form.parentId = this.form.parentId[0]
          }
          saveAccount(this.form).then(response => {
            this.getList()
            this.dialogForm = false
            this.form = {
              account: '',
              nickName: '',
              password: '',
              phoneNumber: '',
              roleId: ''
            }
            this.$message({
              showClose: true,
              message: response.message,
              type: 'success'
            })
          })
        }
      })
    },
    getRole() {
      getRoleList().then(response => {
        this.options = response.data
      })
    },
    getList() {
      this.listLoading = true
      getAccount(this.search).then(response => {
        this.list = response.data.records
        this.count = response.data.total
        this.listLoading = false
      })
    }
  }
}
</script>

<style>
/deep/.el-form-item{
  margin-bottom: 0 !important;
}
</style>

<style scoped>
.title{
  padding-left: 7px;
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}
.right{
  display: flex;
  justify-content: flex-end;
}
.padding{
  margin-bottom: 20px;
}
.titles{
  display: flex;
  align-items: center;
}
.flex{
  padding-top: 20px;
}
.app-container{
  background: #f0f2f5;
}
.app-search{
  background-color: #FFFFFF;
  padding: 20px;
  margin-bottom: 20px;
}
.app-table{
  background-color: #FFFFFF;
  padding: 20px;
}
</style>
